<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-11 17:46:33
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.easy-mine-online.relative.h100
  div.container.overflow-y.mt4.px4
    el-form(ref="formRef", :model="form", :size="formSize", status-icon)
      el-row(:gutter="40")
        el-col(:span="6")
          el-form-item(label="订单ID", prop="id")
            el-input(v-model="form.id", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="订单编号", prop="order_no")
            el-input(v-model="form.order_no", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="标的名称", prop="goods_spec_name")
            el-input(v-model="form.goods_spec_name", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="行业类目", prop="category_id")
            el-select(
              v-model="form.category_id",
              placeholder="请选择",
              clearable,
              @change="categoryChange"
            )
              el-option(
                v-for="item in categoryList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )
        el-col(:span="6", v-if="type == 1")
          el-form-item(label="易入企业", prop="buyer_company_id")
            el-select(
              v-model="form.buyer_company_id",
              placeholder="请选择",
              clearable,
              @change="companyChange"
            )
              el-option(
                v-for="item in sourceCompanyList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )

        el-col(:span="6", v-if="type == 2") 
          |
          |
          |
          |
          |
          el-form-item(label="易出企业", prop="buyer_company_id")
            el-select(
              v-model="form.buyer_company_id",
              placeholder="请选择",
              clearable,
              @change="companyChange"
            )
              el-option(
                v-for="item in sourceCompanyList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )

        el-col(:span="6", v-if="type == 1")
          el-form-item(label="联系电话", prop="mobile")
            el-input(v-model="form.mobile", placeholder="请输入", clearable)

        el-col(:span="6", v-if="type == 1")
          el-form-item(label="订单状态", prop="status")
            el-select(
              v-model="form.status",
              placeholder="请选择",
              clearable,
              @change="onlineListChange"
            )
              el-option(
                v-for="item in onlineList",
                :key="item.value",
                :label="item.name",
                :value="item.value"
              )

        el-col(:span="6", v-if="type == 2")
          el-form-item(label="订单状态", prop="status")
            el-select(
              v-model="form.status",
              placeholder="请选择",
              clearable,
              @change="offlineListChange"
            )
              el-option(
                v-for="item in offlineList",
                :key="item.value",
                :label="item.name",
                :value="item.value"
              )

        el-col(:span="6")
          el-form-item(label="创建时间", prop="start_create_time")
            el-date-picker(
              v-model="form.start_create_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="createChangeTime",
              :size="size"
            )
        el-col(:span="6")
          el-form-item(label="支付时间", prop="start_pay_time")
            el-date-picker(
              v-model="form.start_pay_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="payChangeTime",
              :size="size"
            )
        el-col(:span="6", v-if="type == 1")
          el-form-item(label="发货时间", prop="start_delivery_time")
            el-date-picker(
              v-model="form.start_delivery_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="deliveryChangeTime",
              :size="size"
            )

        el-col(:span="6", v-if="type == 1")
          el-form-item(label="收货时间", prop="start_confirm_time")
            el-date-picker(
              v-model="form.start_confirm_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="confirmChangeTime",
              :size="size"
            )
        el-col(:span="6", v-if="type == 2")
          el-form-item(label="上次核销时间", prop="start_verify_time")
            el-date-picker(
              v-model="form.start_verify_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="verifyChangeTime",
              :size="size"
            )
        el-col(:span="6", v-if="type == 1")
          .flex.justify-end
            el-button(type="primary", @click="onQueryChange") 查询
            el-button(@click="onQueryReset(formRef)") 重置
        el-col(:span="18", v-if="type == 2")
          .flex.justify-end
            el-button(type="primary", @click="onQueryChange") 查询
            el-button(@click="onQueryReset(formRef)") 重置
    .table
      el-table(
        :data="tableData",
        :header-cell-style="tableHeaderStyle",
        :cell-style="tableCellStyle",
        empty-text="暂无数据",
        border,
        style="width: 100%"
      )
        el-table-column(prop="id", label="订单ID", width="74")
        el-table-column(prop="order_no", label="订单编号", width="150")
        el-table-column(prop="goods_spec_name", label="标的名称", width="144")
          template(v-slot="scope")
            div(v-for="(item, index) in scope.row.goods_list", :key="index") {{ item.goods_spec_name }}
        el-table-column(prop="goods_spec_image", label="易入图片", width="150")
          template(v-slot="scope")
            el-image(
              v-for="(item, index) in scope.row.goods_list",
              :src="item.goods_spec_image"
              :zoom-rate="1.2"
              :preview-src-list="formatImage(scope.row.goods_list)"
              :initial-index="index"
              :preview-teleported="true"
              fit="cover")
        el-table-column(prop="category", label="行业类目", width="90")
        el-table-column(prop="company", label="易入企业", width="144")
        el-table-column(prop="mobile", label="联系电话", width="120")
        el-table-column(prop="money", label="易定金额", width="90")
        el-table-column(
          v-if="type == 2",
          prop="available_money",
          label="可用金额",
          width="90"
        )
        el-table-column(prop="payment", label="易定方式", width="90")
        el-table-column(prop="method", label="担保费", width="90")
          template(v-slot="scope")
            div {{ scope.row.method ? scope.row.method : "" }}
        el-table-column(prop="status", label="订单状态", width="90")
          template(v-slot="scope")
            div(:class="initStatusColor(scope.row.status)") {{ initStatusText(scope.row.status) }}
        el-table-column(prop="createtime", label="创建时间", width="117")
        el-table-column(prop="pay_time", label="支付时间", width="117")
        el-table-column(
          v-if="type == 1",
          prop="delivery_time",
          label="发货时间",
          width="117"
        )
        el-table-column(
          v-if="type == 1",
          prop="confirm_time",
          label="收货时间",
          width="117"
        )
        el-table-column(
          v-if="type == 1",
          prop="receipt_status",
          label="是否到账",
          width="88"
        )
          template(v-slot="scope")
            div(v-if="scope.row.receipt_status == 1") 未支付
            div(v-if="scope.row.receipt_status == 2") 未到账
            div(v-if="scope.row.receipt_status == 3") 已到账
        el-table-column(
          v-if="type == 2",
          prop="confirm_time",
          label="核销时间",
          width="117"
        )
        el-table-column(fixed="right", label="操作", width="150")
          template(v-slot="scope", #default)
            div(v-if="scope.row.btns")
              el-button.refund(
                v-if="scope.row.btns.delivery == 1",
                link,
                type="primary",
                size="small",
                @click="onDeliverGoods(scope.row)"
              ) 发货
              el-button.refund(
                v-if="scope.row.btns.view == 1",
                link,
                type="primary",
                size="small",
                @click="onLook(scope.row)"
              ) 查看订单
              el-button.overdue(
                v-if="scope.row.btns.verify == 1",
                link,
                type="primary",
                size="small",
                @click="cancelAfterVerification(scope.row)"
              ) 核销
              el-button.overdue(
                v-if="scope.row.btns.verification_log == 1",
                link,
                type="primary",
                size="small",
                @click="HxHistory(scope.row)"
              ) 核销记录
              el-button.overdue(
                v-if="scope.row.btns.pay == 1",
                link,
                type="primary",
                size="small",
                @click="onPay(scope.row)"
              ) 付费
  //- 分页
  TablePagination(
    v-if="totalList > 0",
    :totalList="totalList",
    :page="form.page",
    @handleCurrentChange="handleCurrentChange")
  //- 发货
  el-dialog(
    v-model="deliverGoodsVisible",
    width="622",
    align-center,
    :show-close="rowId ? false : true",
    :destroy-on-close="true",
    center
  )
    DeliverGoods(
      :rowId="rowId",
      @cancel="deliverGoodsVisible = false",
      @confirm="onDeliverGoodsConfirm"
    )
  //- 核销
  el-dialog(
    v-model="hxVisible",
    width="622",
    align-center,
    :show-close="rowId ? false : true",
    :destroy-on-close="true",
    center
  )
    HxGoods(:rowId="rowId", @cancel="hxVisible = false", @confirm="hxConfirm")
  //-核销记录
  el-dialog(
    v-model="hxHistory",
    width="622",
    align-center,
    :show-close="rowId ? false : true",
    :destroy-on-close="true",
    center
  )
    HxGoodsHistory(
      :rowId="rowId",
      @cancel="hxVisible = false",
      @confirm="hxConfirm"
    )
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import DeliverGoods from "@/views/end/easy-mine/components/DeliverGoods.vue";
import HxGoods from "@/views/end/easy-mine/components/HxGoods.vue";
import HxGoodsHistory from "@/views/end/easy-mine/components/HxGoodsHistory.vue";
import TablePagination from "@/components/TablePagination.vue";
import { useRouter } from "vue-router";
import { getUserInfo, removeUserInfo } from "@/service";
import { Category, OrderParams } from "@/api/common";
import { CompanyAll,OrderFeeRatio, } from "@/api/barterhall";
import { OrderSellerList, OrderDelivery, OrderVerify } from "@/api/easymain";
const router = useRouter();
const type = ref("");
onMounted(() => {
  const userInfo = getUserInfo();
  type.value = userInfo.company.type;

  form.value.type = userInfo.company.type;

  console.log("ssdd", userInfo.type);
  getCategory();
  getOrderParams();
  getCompanyAll();
  getOrderSellerList();
    //获取费率信息
    getOrderFeeRatio();
});
const { proxy } = getCurrentInstance();
const tabList = ref(["线上", "线下"]);
const formRef = ref();
//获取易定我的列表
const getOrderSellerList = () => {
  OrderSellerList(form.value).then((res) => {
    if (res.code == 1) {
      // console.log('易顶我的',res.data.data);
      tableData.value = res.data.data;
      totalList.value = res.data.total;
    }
  });
};

const guarantee_fee_ratio = ref(""); //担保手续费率（%）
const transaction_fee_ratio = ref(""); //卖家付款手续费率（%）
//获取费率信息
const getOrderFeeRatio = () => {
  OrderFeeRatio().then((res) => {
    if (res.code == 1) {
      guarantee_fee_ratio.value = res.data.guarantee_fee_ratio;
      transaction_fee_ratio.value = res.data.transaction_fee_ratio;
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "error" });
    }
  });
};

//获取行业类目
const getCategory = () => {
  Category().then((res) => {
    categoryList.value = res.data;
  });
};

const sourceCompanyList = ref([]);
//获取所有企业
const getCompanyAll = () => {
  CompanyAll()
    .then((res) => {
      if (res.code == 1) {
        sourceCompanyList.value = res.data;
      }
    })
    .catch((err) => {});
};

//企业切换
const companyChange = (val) => {
  form.value.buyer_company_id = val;
  console.log("val", val);
};
const categoryList = ref([]);
const categoryChange = (val) => {
  console.log("val", val);
  form.value.category_id = val;
};
const onlineList = ref([]); //线上

const onlineListChange = (val) => {
  form.value.status = val;
  console.log("val", val);
};
const offlineList = ref([]); //线下

const offlineListChange = (val) => {
  form.value.status = val;
  console.log("val", val);
};
//获取线上线下订单状态
const getOrderParams = () => {
  OrderParams()
    .then((res) => {
      console.log("sdfsfsd", res.data);
      onlineList.value = res.data.online_status.list;
      offlineList.value = res.data.offline_status.list;
    })
    .catch((err) => {});
};

//创建时间
const createChangeTime = (val) => {
  form.value.start_create_time = val;
  form.value.end_create_time = val;
  console.log("开始创建时间", val);
};

//支付时间
const payChangeTime = (val) => {
  form.value.start_pay_time = val;
  form.value.end_pay_time = val;
};

//发货时间
const deliveryChangeTime = (val) => {
  form.value.start_delivery_time = val;
  form.value.end_delivery_time = val;
};

//收获时间

const confirmChangeTime = (val) => {
  form.value.start_confirm_time = val;
  form.value.end_confirm_time = val;
};

//核销时间
const verifyChangeTime = (val) => {
  form.value.start_verify_time = val;
  form.value.end_verify_time = val;
  console.log("核销时间", val);
};

//查看订单
const onLook = (row) => {
  // type==1 线上 type==2 线下
  if (type.value == 1) {
    console.log("type", type);
    router.push({
      path: "/order-detail-online",
      query: {
        id: row.id,
        type: 1,
      },
    });
  }
  if (type.value == 2) {
    router.push({
      path: "/order-detail-offline",
      query: {
        id: row.id,
        type: 1,
      },
    });
  }
};

// 付费
const onPay = (row) => {
  router.push({
    path: "/pay",
    query: {
      id: row.id,
      money: row.pay_money,
      type: 4,
      premiumrate: transaction_fee_ratio.value, //付款手续费用
      return_url: "/easy-mine",
      platform: "end",
    },
  });
};

const form = ref({
  type: "", //1为线上 2为线下
  id: "",
  order_no: "", //订单编号
  goods_spec_name: "", //标的名称
  category_id: "", //行业类目
  buyer_company_id: "", //易入企业id
  mobile: "", //联系电话
  status: "", //订单状态
  start_create_time: "", //开始创建时间
  end_create_time: "", //截止创建时间
  start_pay_time: "", //开始支付时间
  end_pay_time: "", // 截止支付时间
  start_delivery_time: "", //开始发货时间
  end_delivery_time: "", //截止发货时间
  start_confirm_time: "", //开始收获时间
  end_confirm_time: "", //截止收获时间
  start_verify_time: "", //开始上次核销时间
  end_verify_time: "", //截止上次核销时间
  page: 1,
  page_size: 10,
});
const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([
  
]);
const rowId = ref("");
const deliverGoodsVisible = ref(false);
//核销
const hxVisible = ref(false);
const hxHistory = ref(false);
// 状态颜色和文本
const initStatusColor = (status) => {
  return status == 10
    ? ""
    : status == 11
    ? ""
    : status == 20
    ? ""
    : status == 30
    ? ""
    : status == 31
    ? ""
    : status == 40
    ? ""
    : status == 50
    ? "overdue"
    : "refund";
};
const initStatusText = (status) => {
  return status == 10
    ? "待支付"
    : status == 11
    ? "待生效"
    : status == 20
    ? "待发货"
    : status == 30
    ? "待收货"
    : status == 31
    ? "待核销"
    : status == 40
    ? "待评价"
    : status == 50
    ? "已完成"
    : "已取消";
};

// 查询
const onQueryChange = () => {
  console.log('form',form.value);
  getOrderSellerList();
  proxy.$message.success("查询");
};
// 重置
const onQueryReset = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  getOrderSellerList();
};

// 发货
const onDeliverGoods = (row) => {
  rowId.value = row.id;
  deliverGoodsVisible.value = true;
};
//确认按钮
const onDeliverGoodsConfirm = (value) => {
  OrderDelivery(value)
    .then((res) => {
      if (res.code == 1) {
        ElMessage({ message: res.msg, type: "success" });
        deliverGoodsVisible.value = false;
        getOrderSellerList();
      }
      if (res.code == 0) {
        ElMessage({ message: res.msg, type: "warning" });
        deliverGoodsVisible.value = false;
      }
    })
    .catch((err) => {});
};
//核销
const cancelAfterVerification = (row) => {
  hxVisible.value = true;
  rowId.value = row.id;
};
//核销确认按钮
const hxConfirm = (value) => {
  OrderVerify(value).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
      hxVisible.value = false;
      getOrderSellerList();
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "warning" });
      hxVisible.value = false;
    }
  });
};
//核销记录
const HxHistory = (row) => {
  hxHistory.value = true;
  rowId.value = row.id;
};
// 预览图片列表
const formatImage = (list) => {
  const imageArr = [];
  list.forEach((item, index) => {
    imageArr.push(item.goods_spec_image);
  });
  return imageArr;
};
// 数据总条数
const totalList = ref(0);
const handleCurrentChange = (val) => {
  form.value.page = val;
  getOrderSellerList();
};
</script>

<style lang="stylus" scoped>
.img-size {
  width: 100px;
  height: 58px;
  border-radius: 10px 10px 10px 10px;
}

.easy-mine-online {
  .container {
    height: calc(100vh - 304px);
  }
  .overdue {
    color: #E84026 !important;
  }

  .refund {
    color: #2487E8;
  }

  .black {
    color: #606266;
  }

  .no-quota {
    margin-top: 200px;
  }
}
</style>
